1. 正則表達式搜集

https://hsuchihting.github.io/regex/20220731/2418624309/

(1) ０～２０字元限制

/^\S{0,20}$/

a. 非空白開頭
b. {}需搭配其他要件，才能知道限制誰

(2) 包含所有的小數

/^(([1-9]{1}\d*)|(0{1}))(\.\d*)?$/

a. ^開頭
b. [1~9]{出現1次}
c. \d 數字
d. * 0~多個
e. | 或
f. 0{出現1次}
g. . 指定.
h. \d 數字
i. * 0~多個
j. ? 0或1個
k. $ 結束

(3) 搭配方式 replace( " 正則 " , " $ " )

https://www.cnblogs.com/garfieldzhong/p/11654630.html

var str = '"a", "bc"';
str = str.replace(/"([^"]*)"/g, "'$1'");
console.log(str); // -> 'a','bc'

(4)

 const regex = new RegExp(wordToMatch, "gi"); // /xx/gi

//gi => 找出所有符合條件的字母，不分大小寫

(5)不包含0~9、.（字串轉數字用）

[^0-9.]

		// 將千分位去除，並保留小數點
        const stringNumber = "123.4";
        const myNumber = 12.34;
		removeCommaToNumber(stringNumber);
		removeCommaToNumber(myNumber);
        function removeCommaToNumber(myNumber) {
			let changedToString = myNumber.toString()
			const removeSymbol = changedToString.replace(/[^0-9.]/,'')
			const resultNumber = parseFloat(removeSymbol)
			console.log(resultNumber);
        }

(6)忽視大小寫 /i

let myString = "freeCodeCamp";
let fccRegex = /freeCodeCamp/i; //大小寫都進來，但都只取一個

(7)搜尋多個、忽視大小寫 /g

let twinkleStar = "Twinkle, twinkle, little star";
let starRegex = /Twinkle/gi; //搜尋多個、Twinkle字母忽視大小寫

(8) [條件]

let quoteSample = "Beware of bugs in the above code; I have only proved it correct, not tried it.";
let vowelRegex = /[aeiou]/gi;  //有符合這些字母、多個、大小寫皆可
let result = quoteSample.match(vowelRegex);
console.log(result); 
// ['e', 'a', 'e', 'o', 'u', 'i', 'e', 'a', 'o', 'e', 'o', 'e', 'I', 'a', 'e', 'o', 'o', 'e', 'i', 'o', 'e', 'o', 'i', 'e', 'i']

(9)將匹配任何一個字符 /./

let exampleStr = "Let's have fun with regular expressions!";
let unRegex = /un./; // fun sun...都會進來，此處 'fun'

(10)匹配的字符範圍 a-z

let quoteSample = "The quick brown fox jumps over the lazy dog.";
let alphabetRegex = /[a-z]/gi; // Change this line
let result = quoteSample.match(alphabetRegex); // 所有字母， ['t', 'h', 'e'...]

(11)匹配的字符範圍 0-9

let quoteSample = "Blueberry 3.141592653s are delicious.";
let myRegex = /[h-s2-6]/gi; // h~s 2~6、多個、大小寫都進來

(12)+ 複數

let difficultSpelling = "Mississippi";
let myRegex = /s+/g; // ['ss', 'ss']

(13) * 多個複數

let chewieQuote = "Aaaaaaaaaaaaaaaarrrgh!";
let chewieRegex = /Aa*/; // Aaaaaaaaaaaaaaaa

()match

let extractStr = "Extract the word 'coding' from this string.";
let codingRegex = /coding/; // Change this line
let txt = "Extract the word coding from this string."; // Change this line
let result = txt.match(codingRegex);
console.log(result);
// 0: "coding"
// groups: undefined
// index: 17
// input: "Extract the word coding from this string."
// length: 1

限定符

?

可有可無

/the?

the ok
th ok
thy 

*

沒有、多次

/th*e

the ok
th
thy
thhhhhhy
thhhhhhe ok

+

一次以上

/th+e

the ok
th
thy
thhhhhhy
thhhhhhe ok

{...}

固定次數

/th{6}e
the
th
thy
thhhhhhy ok
thhhhhhe

2~6之間

/th{2,6}e
the
th
thy
thhe ok
thhhhhhe ok

2以上

/th{2,}e
the
th
thy
thhe ok
thhhhhhe ok

()+

多個字符配對

/(th)+
the ok
thth ok
thththththtcc ok
thy ok
thhe ok
thhhhhhe ok

或

/a (cat|dog)
a cat ok
a catt ok
a dog ok

字符類

[...]+

取自這些符號

[abc]+
a cat ok
a catt ok
a dog ok

[a-zA-Z0-9]+

^

以外

[^a-zA-Z0-9]+
a cat 取空格
a catt 取空格
a dog 取空格

元符類(含空白)

\開頭

\d+ 數字開頭
\w+ 英文 數字 下底線(單字)
\s 空白 TAB 換行

\D+ 非數字開頭
\W+ 非英文 數字 下底線(非單字)
\S+ 非空白 TAB 換行
/.* 任意(不含空白)

$結尾
/$

/h$
crash

貪婪(大範圍的匹配)切換至懶惰匹配(限定至小範圍匹配)

<.+>
<span><b> spring </span></b>
換<.+?> 只取標籤
<span><b></span></b>

RGB顏色

/#[a-fA-F\d]{6}$\b

ip

/\b((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)\b

(數字重複)

/[0-9()]+/

XD
來源
https://cloudlab.tw/wp/sampleFiles/RegExp/
https://www.readfog.com/a/1635900602644008960
https://www.youtube.com/watch?v=VFOj_sjuBmk
https://regex101.com/

2. 抓本身的方法

html + (this) = DOM本身
html + (event) = e 事件

監聽使用 event 抓本身值
html部分

  <select name="" id="getCityValue" class="selectCity select"></select>

  <script type="module">
    import { getValue, selectCity } from "./js/renderTopLeftCity.js";
    document.querySelector("#getCityValue").addEventListener("change", getValue);
  </script>
  

js部分

   export function getValue(e) {
     let getValueToChange = e.target.value; // 抓值方法
   }

3. Clean Code

資料來源：jimmylab.wordpress.com
https://jimmylab.wordpress.com/2018/09/27/clean-code-about/

(1) 命名

a. 絕對不要用 aaa, a1, a2 這種完全不知道意圖的名稱，至少讓人一眼看出變數代表的意義，例如：traceStartTime 或是 traceCount。

命名規則：動詞 + 名詞
撰寫註解(至少要讓其他人看懂該method的用處)
// 導轉到指定聊天室頁面
onSelectStream(stream) {
this.stream = stream
}

b. 名稱避免誤導，像 O 跟 0，I 跟 l 跟 1，或是 dirToTheDataBase 跟 dirToTheDataManager 這種太相似的變數。

c. 不同的變數，意圖應該要有明顯的區別，像是 fileDir 與 dataPath 實際上是指同一件事情，不應該有兩個變數做重複的事，若有這種情況必須重新思考程式架構。

d. 名稱要可以唸得出來，在互相討論程式碼時才比較有效率，不要有 genyyyymmddhrmnss 這種無法發音的名稱，generationTimeStamp 會更好。

e. 盡量使用大家都熟悉的名稱，課本公式上常用的代稱就可以使用，像寫極座標時，用 r, theta, phi 就是可以接受的命名。

(2) 函式

a. 函式盡量越短越好， 超過螢幕可以一眼看完的函式，在閱讀上一定會有困難，所以函式大概控制在 20 行以內。

b. 函式只做一件事情，如果裡面非常複雜，通常可以拆成更多的小函式。(若能力允許，應將函式存粹化)

c.函式內只有一層抽象概念，太細節的功能就包給更小的函式，需要統合的功能就交給更大的函式。

d. 函式通常是做一個動作，所以用動詞開頭命名會比較適當，像 getTimeTable 或是 isDataContinuous。

命名規則：動詞 + 名詞
撰寫註解(至少要讓其他人看懂該method的用處)
// 導轉到指定聊天室頁面
onSelectStream(stream) {
this.stream = stream
}

e. 函式輸入的參數越少越好，最好是零個，一個次之，兩個就不太好了，盡量避免三個以上，超過要用類別將變數包起來。但是非常直觀的變數數量，例如 plot3D(x, y, z) 直覺上告訴我們需要輸入三個變數，就可以接受。
註解

f. 盡量用程式碼本身表達意圖，因為改程式碼後不一定會記得維護註解，到時候註解沒有表達真正程式碼的功能就會誤導。

g. 一些不太會變的東西是可以放進註解的，例如在程式碼前面放上數學公式的意圖與相對應的變數名稱，或是一些先備知識。

h. 千萬不要留下被註解的程式碼，時間久了會不知道為什麼被註解起來，很多版本管理程式可以幫你存下舊的程式碼，所以在當下版本要將不被使用的程式碼刪掉。

(3) 編排

a. 將不同概念用空白行分隔，降低垂直密度。就像文章需要分段，從頭到尾只有一段的文章看起來會很痛苦。

通則
Tab / 四格排版(空格)
CSS、Option 間要空一格(換一行)
圖片放置於 src / assets
標點符號（例：冒號、逗號…）後一律空一格

b. 一行程式碼最好不要長到需要橫向捲動螢幕，若有一堆變數要換行排列整齊。

c. 要縮排表示流程階層，例如 if 或 while，這樣比較好理解流程的相互關係。